<template>
  <div>
    <NavBar title="嘉聘会直播间" />
    <div class="content-top">
      <!-- 直播中 -->
      <div
        class="underway"
        v-for="(item, index) in list_living"
        :key="index"
        @click="onToWatchClick(item.zbjInfo.zb_url)"
      >
        <img :src="item.zbjInfo.fmLogoURL" alt="" />
        <p>
          <b>{{ item.creginfo.CompanyAliasName }}</b>
          <span>
            <van-icon name="clock" size="14" color="#f70" />
            {{ $dayjs(item.zbjInfo.publishDate).format("MM月DD日 HH:mm") }}
          </span>
          <span>{{ item.zbjInfo.yyCount }}人感兴趣</span>
          <a>直播中</a>
        </p>
      </div>

      <!-- 预告 -->
      <div class="advance" v-if="list_yg.length > 0">
        <b class="zbj-title">直播预告</b>
        <ul>
          <li
            v-for="(item, index) in list_yg"
            :key="index"
            @click.stop="onCompanyClick(item.zbjInfo.companyID)"
          >
            <img :src="item.zbjInfo.fmLogoURL" alt="" />
            <p>
              <b>{{ item.creginfo.CompanyAliasName }}</b>
              <span>
                <van-icon name="clock" size="14" color="#f70" />
                {{ $dayjs(item.zbjInfo.publishDate).format("MM月DD日 HH:mm") }}
              </span>
              <span>{{ item.zbjInfo.yyCount }}人感兴趣</span>
              <a href="#" class="bg" @click.stop="onYY(item, index)">{{
                item.isYY === false ? "预约" : "已预约"
              }}</a>
            </p>
          </li>
        </ul>
      </div>

      <!-- 回顾 -->
      <div class="retrospect" v-if="list_wqzb.length > 0">
        <b class="zbj-title">直播回顾</b>
        <ul>
          <li
            v-for="(item, index) in list_wqzb"
            :key="index"
            @click="onToWatchClick(item.zbjInfo.zb_url)"
          >
            <img :src="item.zbjInfo.fmLogoURL" alt="" />
            <b>{{ item.creginfo.CompanyAliasName }}</b>
          </li>
        </ul>
      </div>

      <!-- 往期 -->
      <div class="previous">
        <b class="zbj-title">往期精彩</b>
        <ul>
          <li v-for="(item, index) in list_wqhg" :key="index">
            <div class="firm" @click="onCompanyClick(item.zbjInfo.companyID)">
              <p>
                <sup>热度{{ item.hot }}</sup>
                <img
                  :src="item.creginfo.logoURL"
                  alt=""
                  v-if="item.creginfo.logoState === 1"
                />
                <img src="@/assets/img/firm_default_avatar.png" alt="" v-else />
              </p>
              <p>
                <b>{{ item.creginfo.CompanyAliasName }}</b>
                <span>{{ item.companyInfo.CompanyContent }}</span>
              </p>
            </div>
            <div class="video">
              <!-- 1 公司介绍
							2 发展方向
							3 升职空间
							4 岗位招聘
							5 薪资福利
							6 培训体系  -->

              <p
                v-for="(item_vedio, index_vedio) in item.list_videos"
                :key="index_vedio"
                :class="{
                  gsjj: item_vedio.type === '1',
                  fzfx: item_vedio.type === '2',
                  szkj: item_vedio.type === '3',
                  gwzp: item_vedio.type === '4',
                  xzfl: item_vedio.type === '5',
                  pxtx: item_vedio.type === '6',
                }"
                @click="onWatchVideo(item_vedio.id, item_vedio.url)"
              >
                <van-icon name="play-circle" size="14" color="#07f" />
                <span>{{ item_vedio.title }}</span>
              </p>

              <!-- <p class="gsjj">
                                <van-icon name="play-circle" size="14" color="#07f" />
                                <span>慕思寝具是一家怎样的企业慕思寝具是一家怎样的企业？</span>
                            </p>
                            <p class="fzfx">
                                <van-icon name="play-circle" size="14" color="#07f" />
                                <span>包吃包住包生活用品</span>
                            </p>
                            <p class="szkj">
                                <van-icon name="play-circle" size="14" color="#07f" />
                                <span>娱乐活动丰富多彩</span>
                            </p>
                            <p class="gwzp">
                                <van-icon name="play-circle" size="14" color="#07f" />
                                <span>组织员工外出旅游</span>
                            </p>
                            <p class="xzfl">
                                <van-icon name="play-circle" size="14" color="#07f" />
                                <span>全方面保障员工生活</span>
                            </p>
                            <p class="pxtx">
                                <van-icon name="play-circle" size="14" color="#07f" />
                                <span>普工/操作工</span>
                            </p> -->
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import { GetZBJList, ZBJVideosView, ZBJYY } from "@/util/http";
import { Icon, Toast } from "vant";
import {
  mixin_person_toJobCompany,
  mixin_person_tologin,
} from "@/mixin/mixins";
import { checkPersonLogin } from "@/util/session";
export default {
  name: "ZBJList",
  components: {
    NavBar,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
  },
  mixins: [mixin_person_toJobCompany, mixin_person_tologin],
  // 定义属性
  data() {
    return {
      list_living: [],
      list_yg: [],
      list_wqzb: [],
      list_wqhg: [],
      loading: true,
    };
  },
  mounted() {
    Toast.loading({
      message: "加载中...",
      forbidClick: this.loading,
    });
    this.onload();
  },
  // 方法集合
  methods: {
    async onload() {
      //1直播中 2直播预告  3往期直播 4往期回顾
      await GetZBJList(1).then((res) => {
        // console.log(1, res);
        this.loading = false;
        this.list_living = res;
      });
      await GetZBJList(2).then((res) => {
        // console.log(2, res);
        this.loading = false;
        this.list_yg = res;

        // this.list_living = res;
      });
      await GetZBJList(3).then((res) => {
        // console.log(3, res);
        this.loading = false;
        this.list_wqzb = res;
      });
      await GetZBJList(4).then((res) => {
        // console.log(4, res);
        this.loading = false;
        this.list_wqhg = res;
      });
    },
    //直播中的 去观看
    onToWatchClick(url) {
      console.log("直播中", url);
      this.$router.push({
        name: "person-zbj-video",
        query: { url: encodeURI(url), type: "vz" },
      });
    },
    onWatchVideo(id, url) {
      ZBJVideosView(id).then((res) => {
    
      });
      console.log("看视频", id, url);
      this.$router.push({
        name: "person-zbj-video",
        query: { url: encodeURI(url), type: "video" },
      });
    },
    //预约
    onYY(item, index) {
      if (!checkPersonLogin()) {
        this.onToLogin();
        return;
      }
      if (item.isYY === true) return;
      ZBJYY(item.zbjInfo.id).then((res) => {
        Toast(res.msg);
        if (res.result === 1) {
          item.isYY = true;
          this.list_yg.splice(index, 1, item);
        }
      });
    },
  },
};
</script>

<style scoped>
/* 标题 */
.zbj-title {
  margin-bottom: 18px;
  font-size: 18px;
  color: #333;
}

/* 直播中 */
.underway {
  display: flex;
  padding: 15px;
  background-color: #fff;
}

.underway img {
  display: flex;
  flex: 0 0 82px;
  height: 82px;
  border-radius: 5px;
  margin-right: 12px;
}

.underway p {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  height: 82px;
}

.underway p b {
  display: flex;
  height: 46px;
  font-size: 17px;
  color: #222;
}

.underway p span {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.underway p span i {
  margin-right: 4px;
}

.underway p span + span {
  font-size: 12px;
  color: #999;
}

.underway p a {
  position: absolute;
  right: 0;
  bottom: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 30px;
  border-radius: 30px;
  background-color: #07f;
  font-size: 14px;
  color: #fff;
}

/* 预告 */
.advance {
  display: flex;
  flex-direction: column;
  padding: 0 15px;
  padding-top: 25px;
}

.advance ul {
  display: flex;
  flex-direction: column;
}

.advance li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}

.advance li img {
  display: flex;
  flex: 0 0 82px;
  height: 82px;
  border-radius: 5px;
  margin-right: 12px;
}

.advance li p {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  height: 82px;
}

.advance li p b {
  display: flex;
  height: 46px;
  font-size: 17px;
  color: #222;
}

.advance li p span {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.advance li p span i {
  margin-right: 4px;
}

.advance li p span + span {
  font-size: 12px;
  color: #999;
}

.advance li p a {
  position: absolute;
  right: 0;
  bottom: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 30px;
  border-radius: 30px;
  background-color: #ccc;
  font-size: 14px;
  color: #fff;
}

.advance li p a.bg {
  background-color: #f70;
}

/* 回顾 */
.retrospect {
  display: flex;
  flex-direction: column;
  padding: 0 15px;
  padding-top: 20px;
}

.retrospect ul {
  display: flex;
  flex-wrap: wrap;
}

.retrospect li {
  display: flex;
  flex-direction: column;
  width: 48%;
  margin-bottom: 18px;
}

.retrospect li:nth-child(2n) {
  margin-left: 4%;
}

.retrospect li img {
  width: 100%;
  height: 110px;
  border-radius: 5px;
}

.retrospect li b {
  margin-top: 8px;
  font-size: 15px;
  color: #222;
}

/* 往期 */
.previous {
  display: flex;
  flex-direction: column;
  padding: 0 15px;
  padding-top: 20px;
}

.previous ul {
  display: flex;
  flex-direction: column;
}

.previous li {
  display: flex;
  flex-direction: column;
  padding: 15px 15px 0;
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: #fff;
}

.previous li .firm {
  display: flex;
  height: 70px;
  margin-bottom: 15px;
}

.previous li .firm p:nth-child(1) {
  position: relative;
  display: flex;
  flex: 0 0 70px;
  height: 70px;
}

.previous li .firm img {
  width: 70px;
  height: 70px;
  border-radius: 5px;
}

.previous li .firm sup {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  border-radius: 2px 2px 5px 5px;
  background-color: rgba(255, 0, 0, 0.55);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.previous li .firm p:nth-child(2) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  height: 70px;
  margin-left: 12px;
  overflow: hidden;
}

.previous li .firm b {
  font-size: 17px;
  color: #222;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.previous li .firm span {
  display: -webkit-box;
  font-size: 12px;
  color: #999;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.previous li .video {
  display: flex;
  flex-direction: column;
}

.previous li .video p {
  display: flex;
  align-items: center;
  height: 46px;
  border-top: 0.5px solid #e8e8e8;
}

.previous li .video p i {
  margin-right: 8px;
  margin-left: 2px;
}

.previous li .video span {
  display: -webkit-box;
  flex: 1;
  font-size: 15px;
  color: #222;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.previous li .video p:after {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 64px;
  height: 24px;
  border-radius: 24px;
  margin-left: 15px;
  font-size: 12px;
}

.previous li .video p.gsjj:after {
  content: "公司介绍";
  background-color: #fbebeb;
  color: #e37b6e;
}

.previous li .video p.fzfx:after {
  content: "发展方向";
  background-color: #fdf0dd;
  color: #de7d2e;
}

.previous li .video p.szkj:after {
  content: "升职空间";
  background-color: #e6e8f4;
  color: #6f67ad;
}

.previous li .video p.gwzp:after {
  content: "岗位招聘";
  background-color: #fdebeb;
  color: #c86852;
}

.previous li .video p.xzfl:after {
  content: "薪资福利";
  background-color: #e4f1ea;
  color: #59a678;
}

.previous li .video p.pxtx:after {
  content: "培训体系";
  background-color: #e0efff;
  color: #4a7abe;
}
</style>